<template>
	<view class="background">
		<view class="card">
			<view class="condition">
				<text style="margin-left: 30rpx;width: 25%;font-weight: bold;">用户类型：</text>
				<select v-model="lookUser.identity">
					<option value="0">学生</option>
					<option value="1">老师</option>
					<option value="2">管理员</option>
				</select>
			</view>

			<view class="condition">
				<text style="margin-left: 30rpx;width: 25%;font-weight: bold;">性别：</text>
				<select v-model="lookUser.sex">
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
			</view>

			<view class="condition">
				<text style="margin-left: 30rpx;width: 25%;font-weight: bold;">学院：</text>
				<select v-model="adademic">
					<option value="计算机与信息安全">计算机与信息安全</option>
					<option value="电子信息工程">电子信息工程</option>
					<option value="电气工程及其自动化">电气工程及其自动化</option>
					<option value="机电工程">机电工程</option>
				</select>
			</view>

			<view class="condition">
				<text style="margin-left: 30rpx;width: 25%;font-weight: bold;">姓名查询：</text>
				<u--input placeholder="模糊查询" border="surround" v-model="lookUser.name"
					@change="getAllUserInfoFun()"></u--input>
			</view>

			<view>
				<table style="width:90%;height: vh;margin-top: 100rpx;margin-left: 5%;">
					<thead>
						<tr style="background-color: #ccc">
							<th>用户类型</th>
							<th>姓名</th>
							<th>学工号</th>
							<th>性别</th>
							<th>学院</th>
							<th>联系方式</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item, index) in tableData" :key="index">
							<td>{{ item.userType }}</td>
							<td>{{ item.name }}</td>
							<td>{{ item.workId }}</td>
							<td>{{ item.sex }}</td>
							<td>{{ item.adcademic }}</td>
							<td>{{ item.contact }}</td>
							<td><button class="button" @click="deleteUserInfo(item.id)">删除</button></td>
						</tr>
					</tbody>
				</table>
			</view>
			<view class="floating-button">
				<button style="font-size: 24px; color: #000;" @click="addTOUser()">+</button>
			</view>
		</view>
	</view>

</template>

<script>
	import Own from "../../api/util/index.js"

	export default {
		data() {
			return {
				lookUser: {
					identity: "",
					sex: "",
					college: "",
					name: ""
				},
				identity: 0,
				sex: '',
				adademic: '',
				keyword: '',
				tableData: [{
						identity: '学生',
						name: '毛健儒',
						workId: '2100301124',
						sex: '男',
						adcademic: '计算机与信息安全',
						contact: '19877036569'
					},
					{
						id: 0,
						userType: '学生',
						name: '毛健儒',
						workId: '2100301124',
						sex: '男',
						adcademic: '计算机与信息安全',
						contact: '19877036569'
					}
				]
			}
		},
		watch: {
			// 监听 lookUser 对象的变化
			'lookUser.sex'(newSex) {
				this.getAllUserInfoFun();
			},
			'lookUser.identity'(newIdentity) {
				this.getAllUserInfoFun();
			}
		},
		methods: {
			async getAllUserInfoFun() {
				let allUserResponse = await Own.getAllUserInfo(this.lookUser);

				this.tableData = allUserResponse.data

			},

			async deleteUserInfo(id) {
				try {
					let deleteResponse = await Own.deleteUserInfo(id);
					alert("删除用户信息成功")
					this.getAllUserInfoFun()
				}catch(error){
					alert("删除用户信息失败")
				}
			},
			async addTOUser() {
				uni.navigateTo({
					url: '/pages/userManage/addUser',
				});
			}

		},
		mounted() {
			this.getAllUserInfoFun()
		}
	}
</script>

<style>
	.background {
		display: flex;
		width: 100%;
		height: 96vh;
		background-color: #f3f4f6;
		flex-direction: column;
	}

	.card {
		border-radius: 20rpx;
		margin-left: 2%;
		margin-right: 2%;
		width: 96%;
		height: 90vh;
		background-color: #fff;
	}

	.condition {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		//justify-content: center;
	}

	select {
		width: 65%;
		border: 1px solid #82848a;
		border-radius: 10rpx;
		height: 50rpx;
	}

	table {
		border-collapse: collapse;
		width: 100%;
		table-layout: fixed;
		font-size: 14px;
	}

	th,
	td {
		border: 1px solid #ddd;
		padding: 8px;
		text-align: center;
		word-wrap: break-word;
		white-space: pre-line;
	}

	.button {
		border: 0;
		color: #d02424;
		font-size: 12px;
		padding: 3px;
	}

	.floating-button {
		position: fixed;
		/* 固定定位 */
		bottom: 10px;
		/* 距离页面底部20px */
		right: 49%;
		/* 距离页面右侧20px */
		width: 60px;
		/* 按钮宽度 */
		height: 60px;
		/* 按钮高度 */
		background-color: #fff;
		/* 背景颜色 */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		/* 添加阴影 */
		cursor: pointer;
		z-index: 1000;
		/* 确保按钮悬浮在其他元素上方 */
	}

	.floating-button span {
		font-size: 24px;
		/* 图标大小 */
		color: #000;
		/* 图标颜色 */
	}

	.floating-button:hover {
		background-color: #f0f0f0;
		/* 悬停时背景变灰 */
	}
</style>